<template name="home">
	<view>
		<scroll-view>
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<!-- 常用服务 -->
			<!-- <view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-blue'></text>选择题库
				</view>
			</view> -->
			<view style="margin: 0px 0px 20px 0px;background-color: white;">
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="8">
						<view style="display: flex;flex-direction: column;">
							<uni-col :span="24" style="text-align: center;">
								<view style="margin: 0 auto; padding: 10px;text-align: center;">
									<image :src="iconUrls[0]" style="width: 50px;height: 50px;display: block;margin: 0 auto;" mode="aspectFit"></image>
									<span>VIP题库</span>
								</view>
							</uni-col>
							<uni-col :span="24">
								<view style="margin: 0 auto; padding: 10px;text-align: center;">
									<image :src="iconUrls[1]" style="width: 50px;height: 50px;display: block;margin: 0 auto;" mode="aspectFit"></image>
									<span>专项练习</span>
								</view>
							</uni-col>
						</view>
					</uni-col>
					<uni-col :span="8" >
						<view class="img-box">
							<view style="padding: 10px;text-align: center;justify-content: center;" @click="handleStudy">
								<!-- <image :src="iconUrls[0]" style="width: 120px;height: 120px;display: block;margin:auto;" mode="aspectFit"></image> -->
								<view class="circle">
									<text class="circle_text">顺序练习</text>
									<text class="circle_num">{{curNum}}/{{totalNum}}</text>
								</view>
							</view>
						</view>
					
					</uni-col>
					<uni-col :span="8">
						<view style="display: flex;flex-direction: column;">
							<uni-col :span="24" style="text-align: center;">
								<navigator url="/pages/mywrong/mywrong"><view style="margin: 0 auto; padding: 10px;text-align: center;">
									<image :src="iconUrls[2]" style="width: 50px;height: 50px;display: block;margin: 0 auto;" mode="aspectFit"></image>
									<span>错题收藏</span>
								</view></navigator>
							</uni-col>
							<uni-col :span="24">
								<view style="margin: 0 auto; padding: 10px;text-align: center;">
									<image :src="iconUrls[3]" style="width: 50px;height: 50px;display: block;margin: 0 auto;" mode="aspectFit"></image>
									<span>随机练习</span>
								</view>
							</uni-col>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="cur-topic" @click="handleToTopic">
				<uni-icons custom-prefix="iconfont" type="icon--cheliang" size="30" color="#328cfb"></uni-icons>
				<text class="cur-top">当前题库: {{parentTopicName}} / {{topicName}}</text>
				<view class="cur-r"><uni-icons type="forward" size="20"></uni-icons></view>
			</view>
			<view class="mft-bottom">
				<text class="mft-notice">满分学习 就选满分通</text><br/>
				<text class="mft-tel">联系人：丁元祝 联系方式：17563333303</text>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import { us,os } from '@/common/util/work.js'
	import socket from '@/common/js-sdk/socket/socket.js'
	import { mapActions } from "vuex"
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	export default {
		name: 'home',
		props:{
			cur:String,
		},
		watch: {
			cur: {
				immediate: true,
				handler:function(val,oldVal){
					console.log('cur',val,oldVal)
				    this.initMenu()
				},
			},
			'$store.state.userInfo':{
				handler(newVal, oldVal) {
					console.log('深度监听:', newVal.topicCategory, oldVal.topicCategory);
					if (newVal.topicCategory) {
						this.getCurTopic();
					}
				},
				deep: true,
				immediate: true
			},
		},
		data() {
			return {
			 swiperList: [
				  {id:1,type: 'image',url: '/static/banner/banner1.png', link: ''},
				  {id:2,type: 'image',url: '/static/banner/banner2.jpg', link: ''},
				  {id:3,type: 'image',url: '/static/banner/banner3.jpg', link: ''},
				  {id:4,type: 'image',url: '/static/banner/banner4.jpg', link: ''},
				],
				iconUrls: [
					'/static/vip_classify_1.png',
					'/static/vip_classify_2.png',
					'/static/vip_classify_3.png',
					'/static/vip_classify_4.png'
				],
				middleApps: [
				  {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
				  {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
				],
				usList:us.data,
				osList:os.data,
				msgCount:0,
				dot:{
				  mailHome:false
				},
				isLogin: uni.getStorageSync(ACCESS_TOKEN),
				gutter: 0,
				nvueWidth: 730,
				totalNum: 0,
				curNum: 1,
				topicName: '',
				parentTopicName: '',
				userTopicCategoryId: '',
				categoryUrl: '/sys/category/loadTreeChildren',
				queryById: '/sys/category/queryById',
			}
		},
		methods: {
			...mapActions([ "codeLogin" ]),
			getCode(e){
			    return new Promise((resolve, reject) => {
			      wx.login({
			      				success: res => {
			      					if (res.code) {
			      						console.log('code-------------',res.code);
			      						let param = {code: res.code};
			      						let url = '/api/wechat/login_by_code_applets';
			      						this.codeLogin(res.code).then((res => {
			      							console.log('======', res.result);
			      							console.log(this.$store.getters.userInfo.username);
											if (res.code == 200) {
												this.isLogin = uni.getStorageSync(ACCESS_TOKEN);
												console.log('登录了');
												this.getCurTopic();
												this.topiclist();
											}
			      						}));
										resolve(res);
			      					}
			      				},
			      				fail: err => {
			      					console.log(err);
									reject(res);
			      				}
			      			});
			    })
			  },
			getUserInfo() {      
				uni.login({        
					provider: 'weixin',        
					success: (res) => {          
						console.log('getUserInfo', res);        
					},
				});    
			},
			handleStudy() {
				console.log('点击了');
				uni.navigateTo({
					url: '../test/test?id='+ this.curNum
				});
			},
			getCurTopic(){
				this.userTopicCategoryId = this.$store.getters.userInfo.topicCategory;
				console.log('onShow', this.userTopicCategoryId);
				// 处理默认显示
				if (this.userTopicCategoryId) {
					this.$http.get(this.queryById,{params:{id:this.userTopicCategoryId}}).then(res=>{
						this.topicName = res.data.result.name;
						this.$http.get(this.queryById,{params:{id:res.data.result.pid}}).then(res=>{
							this.parentTopicName = res.data.result.name;
						});
					});
				}
			},
			handleToTopic(){
				uni.navigateTo({
					url: '../choosetopic/choosetopic'
				})
			},
			initMenu(){
				console.log("-----------home------------")
				let flag = false;
				this.$http.get(`/sys/api/checkToken`).then(res=>{
					if (res.data.code == 200) {
						console.log('++++');
						let userInfo = uni.getStorageSync(USER_INFO)
						this.$store.commit('SET_USERINFO', userInfo);
						console.log('userInfo', userInfo);
						flag = res.data.result;
						console.log('flag', flag);
						let token=uni.getStorageSync(ACCESS_TOKEN);
						console.log('===',token);
						if (!token || !flag) {
							console.log(token, '----', flag);
							this.getCode();
						} else {
							this.getCurTopic();
							this.topiclist();
						}
					}
				})
				
			},
			goPage(page){
				if(!page){
					return false;
				}
				if(page==='annotationList'){
				  this.msgCount = 0
				}
				this.dot[page]=false
				this.$Router.push({name: page})
			},
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this=this
				socket.acceptMessage = function(res){
					// console.log("页面收到的消息", res);
					if(res.cmd == "topic"){
					  //系统通知
					  _this.loadCount('1')
					}else if(res.cmd == "user"){
					  //用户消息
					  _this.loadCount('2')
					} else if(res.cmd == 'email'){
					 //邮件消息
					  _this.loadEmailCount()
					}
				}
			},
			loadCount(flag){
				console.log("loadCount::flag",flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res=>{
					console.log("res::",res)
				  if(res.data.success){
					let msg1Count = res.data.result.anntMsgTotal;
					let msg2Count = res.data.result.sysMsgTotal;
					this.msgCount = msg1Count + msg2Count
					console.log("this.msgCount",this.msgCount)
				  }
				})
			},
			topiclist(){
				api.topic().then((res) => {
					if (res.data.code == 200) {
						this.totalNum = res.data.result.total;
					}
				})
			},
			loadEmailCount(){
				this.dot.mailHome = true
			},
			getTtemDotInfo(item){
				if(item.page==='annotationList' && this.msgCount>0){
				  return this.msgCount
				}
				return '';
			}
		}
	}
</script>

<style scoped>
	.cu-list.grid>.cu-item {
	  padding: 0px 0px; 
	}
    .line2-icon {
	  width: 60px;
	  height: 60px;
    }
	.demo-uni-row {
			margin: 20px 0px;
			
		}
		/* #ifdef MP-ALIPAY || MP-WEIXIN */
		::v-deep .uni-row {
			margin-bottom: 0px;
			display: flex;
			  align-items: stretch;
		}
		.demo-uni-row span{
			display: block;
			font-size: 10px;
			line-height: 20px;
		}
		.circle {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: linear-gradient(to bottom right, #62cdfe, #328cfb);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		}
		.circle .circle_text{
			font-size: 16px;
			color: white;
			font-weight: bold;
			font-family: "微软雅黑";
		}
		.circle .circle_num{
			color: white;
			font-family: "微软雅黑";
		}
		/* #endif */
	.img-box{
		    width: 100%;
		    height: 100%;
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}
		.demo-uni-col {
			border-radius: 5px;
			text-align: center;
			padding: 10px;
			height: 50px;
			display: flex;
			  flex-direction: column;
		}
	
		.dark_deep {
			background-color: #99a9bf;
		}
	
		.dark {
			background-color: #d3dce6;
		}
	
		.light {
			background-color: #e5e9f2;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 5rpx 10rpx 0;
			overflow: hidden;
		}
		
		.cur-topic{
			margin: 20rpx 0px;
			padding: 20rpx 40rpx;
			background-color: white;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: left;
		}
		
		.cur-top{
			padding: 0px 20rpx;
		}
		.cur-r{
			flex: 1;
			text-align: right;
		}
		.mft-bottom{
			margin: 20rpx 0px;
			padding: 20rpx 40rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.mft-notice, .mft-tel{
			color: #ccc;
			font-size: 14px;
			line-height: 30px;
		}
		.mft-notice {
			font-size: 16px;
		}
</style>
